<template>
  <el-dialog title="工序报验验收详情" :visible.sync="show" :close-on-click-modal="false" width="800px" @closed="closed">
    <div v-loading="beLoading">
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6" v-if="checkTable.cfunittype === 4 && planList.length">
          <el-carousel height="200px" indicator-position="none">
            <el-carousel-item v-for="(url, index) in planList" :key="index">
              <el-image class="pile-img" fit="cover" :src="url" :preview-src-list="planList" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="6" class="legend" v-for="(item, index) in statusList2" :key="index">
              <div class="block" :style="{ backgroundColor: item.color }" />
              <div class="label pointer" :class="{ active: currStatus === item.value }" @click="changeStatus(item.value)">{{ item.label }}</div>
            </el-col>
          </el-row>
          <el-row style="margin-top: 5px">
            <el-col :span="6" class="legend" v-for="role in roleList" :key="role.key">
              <div class="block">{{ role.abbr }}</div>
              <div class="label pointer" :class="{ active: roleKey === role.key }" @click="changeRole(role.key)">{{ role.name }}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <BuildingRecord :unit-type="checkTable.cfunittype" :list="list" :status="currStatus" :role-key="roleKey" @cellClick="gotoDetail" />
    </div>
  </el-dialog>
</template>
<script>
// 基础工程工序报验验收详情
import { getFileURL } from '@/api/common'
import { getBuildingBeState } from '@/api/cqCheck'
import { roleList, statusList2 } from '../common'
import BuildingRecord from './BuildingRecord'
export default {
  components: { BuildingRecord },
  data() {
    return {
      roleList,
      statusList2,
      show: false,
      beLoading: false,
      buildingId: '',
      checkTable: {},
      list: [],
      planList: [],
      currStatus: undefined,
      roleKey: undefined
    }
  },
  methods: {
    closed() {
      this.checkTable = {}
      this.list = []
      this.planList = []
      this.currStatus = undefined
      this.roleKey = undefined
    },
    async open(data = {}) {
      this.show = true
      this.buildingId = data.buildingId
      const opt = { buildingId: data.objectId, checkTableId: data.checkTableId }
      this.getBuildingBeState(opt)
    },
    async getBuildingBeState(opt) {
      this.beLoading = true
      const res = await getBuildingBeState(opt).catch(() => false)
      this.beLoading = false
      if (res === false) return

      const data = res.data || {}
      this.checkTable = data.checkTable || {}
      this.list = data.content || []
      this.planList = (data.planList || []).map(fileId => getFileURL(fileId))
    },
    changeStatus(val) {
      this.currStatus = this.currStatus === val ? undefined : val
    },
    changeRole(val) {
      this.roleKey = this.roleKey === val ? undefined : val
    },
    gotoDetail(data) {
      this.show = false
      const query = {
        buildingId: this.buildingId,
        checktableId: this.checkTable.fid,
        objectId: data.objectId,
        batch: data.batch
      }
      this.$router.push({ path: '/statement/CheckList', query })
    }
  }
}
</script>
<style lang="scss" scoped>
.pile-img {
  width: 100%;
  height: 100%;
}
.legend {
  display: flex;
  align-items: center;
  font-size: 14px;
  .block {
    width: 14px;
    height: 14px;
    line-height: 14px;
    border-radius: 2px;
    margin-right: 5px;
    color: white;
    font-size: 12px;
    background-color: #64aeec;
    text-align: center;
  }
  .label {
    display: flex;
    align-items: center;
    color: #666;
  }
  .active {
    background: #64aeec;
    color: white;
    border-radius: 5px;
  }
}
</style>
